<template>
<div>
  
  <div class="miniheader">
    <img src="/src/assets/微信图片_20220829110532.png"/>
    <img src="/src/assets/微信图片_20220829110527.png"/>
    
  </div>
  
   <div class="minibottom">
    <div class="minibottom-1">
      <img src="/src/assets/微信图片_20220829115305.jpg"/>
      <div class="minibottom-1-1">
        <span class="span1">DaiSy</span><div class="Lv" @click="this.$router.push('/minelevel')">Lv2</div>
       <p><span class="span2">粉丝11 关注2</span></p>
      </div>
      
    </div>
     <div class="minibottom-2">
      <div class="minibottom-3">个人主页</div>
      </div>
      <div class="minibottom-4">
          
          <div class="minibottom-4-1" >
            <router-link to="/minediaries">
              <span style="font-size:18px;">56</span>
              <p><span >日记</span></p>
            </router-link>
          </div>
          
          <div class="minibottom-4-1">
            <router-link to="/mineposts">
              <span style="font-size:18px">56</span>
              <p><span>帖子</span></p>  
            </router-link>
          </div>
          <div class="minibottom-4-1" @click="this.$router.push('/minetiwen')">
            <span style="font-size:18px">3</span>
            <p><span>提问</span></p>  
          </div>
          
          <div class="minibottom-4-1">
            <router-link to="/minecollection">
              <span style="font-size:18px" @click="aa">56</span>
              <p><span>收藏</span></p>
            </router-link>
          </div>
          
          <div class="minibottom-4-1">
            <router-link to="/minefootprint">
                <span style="font-size:18px">560</span>
               <p><span>足迹</span></p>  
            </router-link>

          </div>
      </div>
      <div style="width:90%;height:65px;background:linear-gradient(90deg,#ef8675,#fdc2c0);border-radius:5px;position:absolute;top:190px;left:5%;z-index:99">
       <div style="margin-top:5%"><span style="color:#FFFFFF;font-weight:bold;margin-left:10%;font-size:18px">会员卡</span><span style="color:#FFFFFF;margin-left:5%;">开通即领百元红包</span><router-link to="/member"><button style="color:#ec7b67;background-color:#FFFFFF;border:0px;border-radius:50px;margin-left:10%" @click="member">立即开通</button></router-link></div>
      </div>
  </div>
  <div class="minifoot">
      <div class="minifoot-1">
        <span style="font-size:10px;color:#7d7d7c">我的订单</span>
        <div class="minifoot-1-1">
          <div class="minifoot-1-1-1" @click="this.$router.push('/orderlist/orderlisthome?1')"><img src="/src/assets/微信图片_20220829152335.png"/><p><span style="font-size:10px;color:#7d7d7c">待付款</span></p></div>
          <div class="minifoot-1-1-1" @click="this.$router.push('/orderlist/orderlisthome?2')"><img src="/src/assets/微信图片_20220829152340.png"/><p><span style="font-size:10px;color:#7d7d7c">待消费</span></p></div>
          <div class="minifoot-1-1-1" @click="this.$router.push('/orderlist/orderlisthome?3')"><img src="/src/assets/微信图片_20220829152345.png"/><p><span style="font-size:10px;color:#7d7d7c">待评价</span></p></div>
          <div class="minifoot-1-1-1" @click="this.$router.push('/orderlist/orderlisthome?4')"><img src="/src/assets/微信图片_20220829152350.png"/><p><span style="font-size:10px;color:#7d7d7c">退款</span></p></div>
          <div class="minifoot-1-1-1" @click="this.$router.push('/orderlist/orderlisthome')"><img src="/src/assets/微信图片_20220829152354.png"/><p><span style="font-size:10px;color:#7d7d7c">全部订单</span></p></div>
        </div>
        <span style="font-size:10px;color:#7d7d7c;line-height:40px">常用工具</span>
        <div class="minifoot-1-1" style="height:150px">
          <div class="minifoot-1-1-1" @click="this.$router.push('/mineintegral')"><img src="/src/assets/微信图片_20220829153609.png"/><p><span style="font-size:10px;color:#7d7d7c">签到</span></p></div>
          <div class="minifoot-1-1-1"><img src="/src/assets/微信图片_20220829153616.png"/><p><span style="font-size:10px;color:#7d7d7c">我的评价</span></p></div>
          <div class="minifoot-1-1-1"><img src="/src/assets/微信图片_20220829153621.png"/><p><span style="font-size:10px;color:#7d7d7c">写日记</span></p></div>
          <div class="minifoot-1-1-1" @click="this.$router.push('/chat')"><img src="/src/assets/微信图片_20220829153625.png"/><p><span style="font-size:10px;color:#7d7d7c">客服</span></p></div>
          <div class="minifoot-1-1-1"><img src="/src/assets/微信图片_20220829153634.png"/><p><span style="font-size:10px;color:#7d7d7c">优惠卷</span></p></div>
          <div class="minifoot-1-1-1" @click="this.$router.push('/question/feedback')"><img src="/src/assets/微信图片_20220829153634.png"/><p><span style="font-size:10px;color:#7d7d7c">意见反馈</span></p></div>
          <div class="minifoot-1-1-1"  @click="this.$router.push('/question/commonquestion')"><img src="/src/assets/微信图片_20220829153637.png"/><p><span style="font-size:10px;color:#7d7d7c">常见问题</span></p></div>
          <div class="minifoot-1-1-1"><img src="/src/assets/微信图片_20220829153634.png"/><p><span style="font-size:10px;color:#7d7d7c">优惠卷</span></p></div>
          <div class="minifoot-1-1-1"></div>
          <div class="minifoot-1-1-1"></div>
        </div>
        <div style="height:50px;width:100%;text-align: center">
        <p><span style="font-size:20px;line-height:50px">为你推荐</span></p>
        </div>
        <div class="minifoot-1-2" v-for="item in arr" :key="item">
          <div style="width:90%;height:90%;margin-top:3%;float:left;margin-left:3%" >
          <img src="/src/assets/微信图片_20220829160908.png" style="width:90px;height:90px;float:left;"/>
          <div style="width:210px;height:90px;float:left;float:left;margin-left:5%;background-color:#FFFFFF"  >
            <span>【皮秒激光】皮秒嫩肤保湿去黄提亮无刺激科学…</span>
            <p><span style="font-size:10px;color:#cccccc">李金明,北京华瑞整形医院</span></p>
            <p><span style="color:red;float:left"><b>￥999.0</b></span><span style="border:1px solid #ec7b67;color:#ec7b67;width:20px;height:10px;margin-left:40%;margin-right:2%;font-size:10px;">特惠</span><span style="border:1px solid #ec7b67;color:#ec7b67;width:20px;height:10px;font-size:10px;">秒杀</span></p>
          </div>
          </div>
          
        </div>
      </div>
  </div>
</div>
</template>

<script setup lang='ts'>
    let arr=[1,2,3,4,5]
    
    
</script>

<style>
.miniheader{width: 100%; height: 40px; background-color: #ffffff;position: flex;}
.miniheader img{float: right;margin-right:5%;margin-top:2%;}
.minibottom{width:100% ;background-color:#ffffff ;}
.minibottom-1{width: 60%;height: 80px; background-color: #ffffff;float: left; }
.minibottom-1 img{width: 60px; height: 60px;margin-top: 8%;margin-left: 5%;float: left;}
.minibottom-1-1{float: left;margin-left:5%;margin-top: 10%;width: 100px;}
.p1{font-size:14px;color: #999999;}
.span1{font-size: 20px;font-weight: bold;float: left;}
.span2{font-size:10px;color: #999999;float: left;}
.Lv{width: 35px; color: #ffffff;background-color:#ec7b67;font-size: 10px;text-align: center;border-radius: 30px;float: right;margin-top:-25% ;margin-left: 25%;}
.minibottom-2{width:40%;height: 80px;background-color: #ffffff;float: right;}
.minibottom-3{width:70px;height:22px;color: #ffffff; background-color:#82b3cb;font-size: 12px;border-radius: 30px  0% 0% 30px;text-align: center;float: right;margin-top: 17%;line-height: 22px;}
.minibottom-4{width: 100%; height: 140px; background-color:#ffffff ;float: left;display: flex;justify-content:space-around;}
.minibottom-4-1{width:50px;text-align: center;background-color: #ffffff;margin-top: 8%;font-size: 14px;margin-top: 3%;}
.minifoot{width: 100%;background-color: #f1efec;float: left;}
.minibottom-4-1 span{color:#3d3d3d;}
.minifoot-1{width: 90%;margin: auto;margin-top: 10%;}
.minifoot-1-1{width: 100%;height: 65px;background-color: #ffffff;margin-top: 4%;border-radius: 5px;display: flex;justify-content: space-around;flex-wrap: wrap;}
.minifoot-1-1-1{width:70px;text-align: center;height: 65px;margin-top: 4%;}
.minifoot-1-2{width: 100%;height: 110px;background-color: #ffffff;margin-top: 4%;border-radius: 5px;}

</style>